<template>
  <div id="dynamicbox">
      <Timeline>
        <TimelineItem v-for="(v,i) in dynamic_data" :key="v.i" v-if="i>=minpage && i<maxpage">
          <Row>{{v.time}}</Row>
          <Row>
            <Col :md="{span:24}" :xs="{span:24}">
            <Card>
              <div style="text-align:center">
                <div class="img_box">
                  <img v-gallery :src="src+v.img" class="img">
                </div>
                <h3>{{v.text}}</h3>
              </div>
            </Card>
            </col>
          </Row>
        </TimelineItem>
      </Timeline>
    <Page :current="current" :total="total" :page-size="pagesize" simple @on-change="handlePage" />
  </div>
</template>

<script>
  export default {
    name: 'DynamicBox',
    data() {
      return {
        src:this.$src+'tp5_jzt-blog_server/public/uploads/dynamic/',
        dynamic_data: '',
        total: 0,
        pagesize: 2,
        current: 1,
        minpage: 0,
        maxpage:2,
      }
    },
    components: {

    },
    methods: {
      getDynamic() {
        this.$axios({
          method: 'post',
          url: 'tp5_jzt-blog_server/public/index.php/home/getdynamic',
        }).then((res) => {
          // console.log(res.data);
          this.dynamic_data = res.data;
          this.total = res.data.length;
        }).catch((error) => {
          console.log(error)
        })
      },
      handlePage(value) {
        this.current= value
        this.minpage=(value-1)*this.pagesize
        this.maxpage=(value)*this.pagesize
      },
    },
    created() {
      this.getDynamic();
    },
    mounted() {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #dynamicbox {
    padding: 15px;
  }
  .img_box {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
  }

  .img_box .img {
    display: block;
    margin: 0 auto;
    height: 100%;
  }
</style>
